.weather-alert {
  position: relative;
  user-select: none;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;

  // 背景容器
  .alert-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // 220px × 48px, 圆角4px, #586570 38%透明度
    background: var(--background-color);
    opacity: var(--background-opacity);
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
  }

  // 气象图标
  .alert-icon {
    position: absolute;
    // 位置 51px 689px, 大小 32px 32px (相对于44px,681px的组件位置)
    left: 7px;  // 51 - 44 = 7px
    top: 8px;   // 689 - 681 = 8px
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;

    &:hover {
      transform: scale(1.1);
      filter: brightness(1.2);
    }

    &:active {
      transform: scale(1.05);
    }
  }

  // 内容区域
  .alert-content {
    position: absolute;
    // 从图标右侧开始，包含时间标签和告警标题
    left: 46px;  // 7px(图标left) + 32px(图标width) + 7px(间距) = 46px
    top: 6px;    // 垂直居中对齐
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;

    // 时间标签
    .time-label {
      // 位置 90px 687px (相对位置: 90-44=46px, 687-681=6px)
      // SourceHanSansSC Medium, 14px, #FFFFFF, 行高16px
      font-family: SourceHanSansSC, sans-serif;
      text-align: left;
      font-style: normal;
      line-height: 16px;
      margin-bottom: 2px;
      transition: color 0.3s ease;
    }

    // 告警标题
    .alert-title {
      // 位置 90px 709px (相对位置: 90-44=46px, 709-681=28px)
      // SourceHanSansSC Normal, 14px, rgba(255,255,255,0.8), 行高14px
      font-family: SourceHanSansSC, sans-serif;
      text-align: left;
      font-style: normal;
      line-height: 14px;
      transition: color 0.3s ease;
    }

    &:hover {
      .time-label,
      .alert-title {
        color: #FFFFFF !important;
      }
    }
  }

  // 告警数量
  .alert-count {
    position: absolute;
    // 位置 226px 693px (相对位置: 226-44=182px, 693-681=12px)
    right: 20px;  // 从右侧对齐，确保在220px宽度内居中
    top: 12px;    // 垂直居中
    // DINAlternate Bold, 24px, #1AD7FF, 行高24px, 居中对齐
    font-family: DINAlternate, sans-serif;
    text-align: center;
    font-style: normal;
    line-height: 24px;
    letter-spacing: 0.86px;
    transition: all 0.3s ease;
    z-index: 2;

    // 渐变文字效果
    &.gradient-text {
      background: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }

    &:hover {
      transform: scale(1.1);
      filter: brightness(1.2);
    }
  }

  // 悬停效果
  &:hover {
    transform: translateY(-2px);
    
    .alert-background {
      opacity: calc(var(--background-opacity) + 0.1);
      filter: brightness(1.1);
    }

    .alert-icon {
      filter: brightness(1.3) saturate(1.2);
    }
  }

  &:active {
    transform: translateY(0);
  }

  // 主题样式
  &.dark {
    // 默认深色主题
  }

  &.light {
    .alert-background {
      background: rgba(200, 200, 200, 0.6) !important;
    }

    .time-label {
      color: rgba(0, 0, 0, 0.9) !important;
    }

    .alert-title {
      color: rgba(0, 0, 0, 0.7) !important;
    }

    .alert-count {
      color: #1565C0 !important;

      &.gradient-text {
        background: linear-gradient(90deg, #1565C0 0%, #42A5F5 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
      }
    }

    &:hover {
      .alert-content {
        .time-label {
          color: rgba(0, 0, 0, 1) !important;
        }

        .alert-title {
          color: rgba(0, 0, 0, 0.9) !important;
        }
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .alert-icon {
      width: 28px !important;
      height: 28px !important;
      left: 6px;
      top: 10px;
    }

    .alert-content {
      left: 38px;
      top: 8px;

      .time-label {
        font-size: 12px !important;
        line-height: 14px;
      }

      .alert-title {
        font-size: 12px !important;
        line-height: 12px;
      }
    }

    .alert-count {
      font-size: 20px !important;
      right: 16px;
      top: 14px;
    }
  }

  @media (max-width: 480px) {
    .alert-icon {
      width: 24px !important;
      height: 24px !important;
      left: 4px;
      top: 12px;
    }

    .alert-content {
      left: 32px;
      top: 10px;

      .time-label {
        font-size: 10px !important;
        line-height: 12px;
        margin-bottom: 1px;
      }

      .alert-title {
        font-size: 10px !important;
        line-height: 10px;
      }
    }

    .alert-count {
      font-size: 18px !important;
      right: 12px;
      top: 15px;
    }
  }

  // 焦点可访问性
  &:focus {
    outline: 2px solid rgba(26, 215, 255, 0.5);
    outline-offset: 2px;
  }

  .alert-icon:focus,
  .alert-content:focus {
    outline: 2px solid rgba(26, 215, 255, 0.8);
    outline-offset: 2px;
  }

  // 高对比度模式
  @media (prefers-contrast: high) {
    .alert-background {
      opacity: 0.8 !important;
      border: 2px solid var(--background-color) !important;
    }

    .time-label,
    .alert-title {
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
      font-weight: bold !important;
    }

    .alert-count {
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
      font-weight: 900 !important;
    }

    .alert-icon {
      filter: contrast(1.5) !important;
    }
  }

  // 减少动画
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition: none !important;
      transform: none !important;
      animation: none !important;
    }

    &:hover {
      transform: none !important;
    }

    .alert-icon:hover,
    .alert-count:hover {
      transform: none !important;
    }
  }

  // 数据状态
  &.loading {
    opacity: 0.7;
    pointer-events: none;

    .alert-count {
      animation: pulse 1.5s ease-in-out infinite;
    }

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 10px;
      width: 12px;
      height: 12px;
      margin-top: -6px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: #1AD7FF;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      z-index: 10;
    }
  }

  &.warning {
    .alert-background {
      background: #FF9800 !important;
      opacity: 0.6 !important;
    }

    .alert-count {
      color: #FF6F00 !important;
      animation: alertPulse 2s ease-in-out infinite;

      &.gradient-text {
        background: linear-gradient(90deg, #FF8F00 0%, #FFB74D 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
      }
    }
  }

  &.danger {
    .alert-background {
      background: #F44336 !important;
      opacity: 0.7 !important;
    }

    .alert-count {
      color: #D32F2F !important;
      animation: dangerPulse 1s ease-in-out infinite;

      &.gradient-text {
        background: linear-gradient(90deg, #D32F2F 0%, #F44336 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
      }
    }

    .alert-icon {
      animation: shake 0.5s ease-in-out infinite;
    }
  }

  &.success {
    .alert-background {
      background: #4CAF50 !important;
      opacity: 0.5 !important;
    }

    .alert-count {
      color: #2E7D32 !important;

      &.gradient-text {
        background: linear-gradient(90deg, #2E7D32 0%, #4CAF50 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
      }
    }
  }

  &.disabled {
    pointer-events: none;
    opacity: 0.5;

    * {
      filter: grayscale(1);
    }
  }

  // 动画关键帧
  @keyframes pulse {
    0%, 100% {
      opacity: 0.6;
    }
    50% {
      opacity: 1;
    }
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes alertPulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
      filter: brightness(1.3);
    }
  }

  @keyframes dangerPulse {
    0%, 100% {
      transform: scale(1);
      filter: brightness(1);
    }
    50% {
      transform: scale(1.15);
      filter: brightness(1.5);
    }
  }

  @keyframes shake {
    0%, 100% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-2px);
    }
    75% {
      transform: translateX(2px);
    }
  }

  // 特殊效果
  &.enhanced {
    &::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, transparent, rgba(26, 215, 255, 0.3), transparent);
      border-radius: calc(var(--border-radius) + 2px);
      z-index: -1;
      animation: borderFlow 3s linear infinite;
    }

    .alert-count {
      animation: countGlow 2s ease-in-out infinite;
    }
  }

  @keyframes borderFlow {
    0% {
      transform: rotate(0deg);
      opacity: 0.5;
    }
    100% {
      transform: rotate(360deg);
      opacity: 0.5;
    }
  }

  @keyframes countGlow {
    0%, 100% {
      text-shadow: 0 0 5px rgba(26, 215, 255, 0.5);
    }
    50% {
      text-shadow: 0 0 15px rgba(26, 215, 255, 0.8), 0 0 25px rgba(26, 215, 255, 0.6);
    }
  }

  // 错误状态
  &.error {
    .alert-background {
      background: #FF5722 !important;
      opacity: 0.8 !important;
    }

    &::after {
      content: '数据异常';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(255, 0, 0, 0.9);
      color: white;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 500;
      z-index: 15;
    }
  }

  // 更新状态
  &.updating {
    .alert-count {
      animation: updateAnimation 0.8s ease-in-out;
    }
  }

  @keyframes updateAnimation {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.7;
      filter: brightness(1.5);
    }
  }
} 